<template>
    <div class="dataQueryTools">
        <div class="toolsBox">
            <div :class="tool.className" v-for="(tool, i) in toolsArr" :key="i">
                <img
                    v-if="isPhone || (!isPhone && tool.toolTitle != 'graySta')"
                    @click="changeTools(i, tool)"
                    :src="clickPng.includes(i) ? tool.hoverUrl : tool.imgUrl"
                    @mouseover="overFun(0, i)"
                    @mouseout="overFun(1, i)"
                    alt
                />
            </div>
        </div>
    </div>
</template>

<script>
/* global Cesium viewer */
import CommonJs from 'U/common.js';
import dataCenterBus from 'U/dataCenterBus';
import { flyToBoundingSphere } from 'U/dataQueryFunc';

export default {
    data() {
        return {
            toolsArr: [
                {
                    imgUrl: this.$store.state.isPhone
                        ? require(`./theme/img/toolImgPhone/sourch0.png`)
                        : require(`./theme/img/toolImg/sourch0.png`),
                    hoverUrl: this.$store.state.isPhone
                        ? require('./theme/img/toolImgPhone/sourch1.png')
                        : require(`./theme/img/toolImg/sourch1.png`),
                    toolTitle: 'list_dis',
                    fun_list_dis: 'list_disFun',
                    mutexBtn: ['layer_ctrl', 'fun_group'],
                    clearFun: 'clearQueryList',
                    className: 'noMargin',
                },
                {
                    imgUrl: this.$store.state.isPhone
                        ? require(`./theme/img/toolImgPhone/del_result0.png`)
                        : require(`./theme/img/toolImg/del_result0.png`),
                    hoverUrl: this.$store.state.isPhone
                        ? require('./theme/img/toolImgPhone/del_result1.png')
                        : require(`./theme/img/toolImg/del_result1.png`),
                    toolTitle: 'del_result',
                    fun_del_result: 'del_resultFun',
                    mutexBtn: ['list_dis'],
                    clearFun: '',
                    className: 'noMargin',
                },
                {
                    imgUrl: this.$store.state.isPhone
                        ? require(`./theme/img/toolImgPhone/list_dis0.png`)
                        : require(`./theme/img/toolImg/list_dis0.png`),
                    hoverUrl: this.$store.state.isPhone
                        ? require('./theme/img/toolImgPhone/list_dis1.png')
                        : require(`./theme/img/toolImg/list_dis1.png`),
                    toolTitle: 'fun_group',
                    fun_fun_group: 'groupFun',
                    mutexBtn: ['list_dis', 'LAI'],
                    clearFun: 'clearGroup',
                    className: 'noMargin',
                },
                {
                    imgUrl: this.$store.state.isPhone
                        ? require(`./theme/img/toolImgPhone/hdtj0.png`)
                        : require(`./theme/img/toolImg/hdtj0.png`),
                    hoverUrl: this.$store.state.isPhone
                        ? require('./theme/img/toolImgPhone/hdtj1.png')
                        : require(`./theme/img/toolImg/hdtj1.png`),
                    toolTitle: 'graySta',
                    fun_graySta: 'grayStaFun',
                    mutexBtn: [],
                    clearFun: 'clearGraySta',
                    className: 'tool',
                },
                {
                    imgUrl: this.$store.state.isPhone
                        ? require(`./theme/img/toolImgPhone/layer_ctrl0.png`)
                        : require(`./theme/img/toolImg/layer_ctrl0.png`),
                    hoverUrl: this.$store.state.isPhone
                        ? require('./theme/img/toolImgPhone/layer_ctrl1.png')
                        : require(`./theme/img/toolImg/layer_ctrl1.png`),
                    toolTitle: 'layer_ctrl', // 按钮标识
                    fun_layer_ctrl: 'layerCtrlFun', // 点击触发方法
                    mutexBtn: ['list_dis'], // 互斥的按钮
                    clearFun: 'clearLayerCtrl', // 清空的方法
                    className: 'noMargin',
                },
                {
                    imgUrl: this.$store.state.isPhone
                        ? require(`./theme/img/toolImgPhone/line_measure0.png`)
                        : require(`./theme/img/toolImg/line_measure0.png`),
                    hoverUrl: this.$store.state.isPhone
                        ? require('./theme/img/toolImgPhone/line_measure1.png')
                        : require(`./theme/img/toolImg/line_measure1.png`),
                    toolTitle: 'line_measure',
                    fun_line_measure: 'line_measureFun',
                    mutexBtn: [],
                    clearFun: 'clearLineQuery',
                    className: 'noMargin',
                },
                {
                    imgUrl: this.$store.state.isPhone
                        ? require(`./theme/img/toolImgPhone/area_measure0.png`)
                        : require(`./theme/img/toolImg/area_measure0.png`),
                    hoverUrl: this.$store.state.isPhone
                        ? require('./theme/img/toolImgPhone/area_measure1.png')
                        : require(`./theme/img/toolImg/area_measure1.png`),
                    toolTitle: 'area_measure',
                    fun_area_measure: 'area_measureFun',
                    mutexBtn: [],
                    clearFun: 'clearAreaQuery',
                    className: 'noMargin',
                },
                {
                    imgUrl: this.$store.state.isPhone
                        ? require(`./theme/img/toolImgPhone/2D0.png`)
                        : require(`./theme/img/toolImg/2D0.png`),
                    hoverUrl: this.$store.state.isPhone
                        ? require('./theme/img/toolImgPhone/2D1.png')
                        : require(`./theme/img/toolImg/2D1.png`),
                    toolTitle: '2D',
                    fun_3D: 'to3DFun',
                    fun_2D: 'to2DFun',
                    mutexBtn: [],
                    className: 'noMargin',
                },
                {
                    imgUrl: this.$store.state.isPhone
                        ? require(`./theme/img/toolImgPhone/fly_home0.png`)
                        : require(`./theme/img/toolImg/fly_home0.png`),
                    hoverUrl: this.$store.state.isPhone
                        ? require('./theme/img/toolImgPhone/fly_home0.png')
                        : require(`./theme/img/toolImg/fly_home0.png`),
                    toolTitle: 'fly_home',
                    fun_fly_home: 'fly_homeFun',
                    mutexBtn: [],
                    className: 'noMargin',
                },
            ],
            clickPng: [],
            mouseroverPng: null,
            isPhone: this.$store.state.isPhone,
        };
    },
    mounted() {
        let disCode = this.$route.query.disCode;
        if (disCode) {
            if (disCode === 'REF') {
                this.REFFun();
            } else if (disCode === 'LAI') {
                this.LAIFun();
            } else if (disCode === 'NDVF') {
                this.NDVFun();
            } else if (disCode === 'list') {
                setTimeout(() => {
                    this.list_disFun();
                }, 0);
            }
        }
        CommonJs.setPrimiObg();
    },
    methods: {
        // 地图工具图片悬浮
        overFun(numCode, index) {
            if (numCode === 0) {
                this.mouseroverPng = index;
            } else {
                this.mouseroverPng = null;
            }
        },
        // 地图工具图标点击
        changeTools(index, item) {
            if (
                !(
                    item.toolTitle === '2D' ||
                    item.toolTitle === '3D' ||
                    item.toolTitle === 'fly_home'
                )
            ) {
                // 之前点击过的按钮点击
                if (this.clickPng.includes(index)) {
                    this.clickPng.splice(
                        this.clickPng.findIndex(sindex => sindex === index),
                        1
                    );
                    this.toolsArr[index].clearFun && this[this.toolsArr[index].clearFun]();
                    return;
                }
                // 如果之前的按钮与此时点击的按钮功能互斥
                this.clickPng.forEach((itemTwo, indexTwo) => {
                    if (
                        this.toolsArr[index].mutexBtn &&
                        this.toolsArr[index].mutexBtn.includes(this.toolsArr[itemTwo].toolTitle)
                    ) {
                        this.clickPng.splice(indexTwo, 1);
                        this.toolsArr[itemTwo].clearFun && this[this.toolsArr[itemTwo].clearFun]();
                    }
                });
                // 如果是清空按钮不要点击状态
                if (item.toolTitle !== 'del_result') {
                    // 点击状态添加
                    this.clickPng.push(index);
                    // 如果是列表展示，恢复其球上的绘制
                    if (item.toolTitle === 'list_dis') {
                        this.changeStatus(true);
                        // let entities = viewer.entities;
                        // entities.show = true;
                        // viewer.dataSources._dataSources.forEach(item => {
                        //     item.show = true;
                        // });
                        let drawHelper = new Cesium.C_DrawHelper(viewer.scene);
                        drawHelper.hideOrShowMarker(true);
                        drawHelper.stopMarkerFun(false);
                    }
                }
            }
            this[item['fun_' + item.toolTitle]]();
            if (index === this.toolsArr.length - 1 && this.$parent.checkedLAI) {
                this.point_draw(index);
            }
        },
        // 清除列表选中
        clearSelectedBtn(code) {
            let toolIndex = this.toolsArr.findIndex(item => item.toolTitle === code);
            let indexR = this.clickPng.findIndex(item => item === toolIndex);
            if (indexR !== undefined && indexR !== -1) {
                this.clickPng.splice(indexR, 1);
            }
        },
        point_draw() {
            this.$parent.$refs.funGroup.$refs.optionPanel.point_draw();
        },
        groupFun() {
            this.$parent.funGroupShow = true;
        },
        // 图层管理界面
        layerCtrlFun() {
            this.$parent.ctrlLayerDis();
        },
        // 列表展示界面
        list_disFun() {
            this.$parent.ctrllistDis();
        },
        changeStatus(status) {
            // 隐藏多面，圆，方形的绘制
            viewer.entities.values.forEach(item => {
                if (item.id !== 'drawArea') {
                    item.show = status;
                }
            });
            // 隐藏shp文件上传的绘制
            viewer.dataSources._dataSources.forEach(item => {
                if (item.name !== 'specialProducts') {
                    item.show = status;
                }
            });
            // let drawHelper = new Cesium.C_DrawHelper(viewer.scene);
            // // 隐藏Marker点位
            // drawHelper.primitives._primitives.forEach(item => {
            //     if (item.getType && item.getType() === 'Marker') {
            //         if (status && item.id !== 'drawMarker') {
            //             item.show = status;
            //         }
            //     }
            // });
            // drawHelper.stopMarkerFun(!status);
        },
        // 清空球上展示的查询信息
        del_resultFun() {
            this.changeStatus(false);
            let toolIndex = this.toolsArr.findIndex(
                item => item.toolTitle === 'graySta' || item.toolTitle === 'fun_group'
            );
            let indexR = this.clickPng.findIndex(item => item === toolIndex);
            if (!(indexR !== undefined && indexR !== -1)) {
                let drawHelper = new Cesium.C_DrawHelper(viewer.scene);
                // 隐藏Marker点位
                drawHelper.hideOrShowMarker(false, 'listMarker');
                // 停止点位绘制
                drawHelper.stopMarkerFun(true, 'listMarker');
            }
        },
        // REF方法
        REFFun() {
            this.$parent.ctrlSeqImgsDis(
                '',
                // 'GFWFVTIMESERIES-PNG-4326',
                'ref_mid_data-PNG-4326',
                'http://36.112.11.166:28310'
            );
        },
        // LAI方法
        LAIFun() {
            return false;
        },
        // NDV方法
        NDVFun() {
            this.$parent.ctrlSeqImgsDis(
                '',
                'NDVINOBLACKTIMESERIES-PNG-4326',
                'http://36.112.11.166:28310'
            );
        },

        // 线测量方法
        line_measureFun() {
            let drawHelper = new Cesium.C_DrawHelper(viewer.scene);
            drawHelper.enable = true;
            drawHelper.startMeasureDistance(
                { enEdit: true, primitives: CommonJs.getPrimiLine() },
                {
                    startCallback: function() {},
                    endCallback: function(item, group, latlngArr) {
                        this.line_measureFun();
                    }.bind(this),
                }
            );
        },
        // 面积测量方法
        area_measureFun() {
            let drawHelper = new Cesium.C_DrawHelper(viewer.scene);
            drawHelper.enable = true;
            drawHelper.startMeasureArea(
                { enEdit: true, primitives: CommonJs.getPrimiArea() },
                {
                    startCallback: function() {},
                    endCallback: function(item, group, latlngArr) {
                        this.area_measureFun();
                    }.bind(this),
                }
            );
        },
        // 转2d方法
        to2DFun() {
            let index = this.toolsArr.findIndex(item => item.toolTitle === '2D');
            this.toolsArr[index].toolTitle = '3D';
            this.toolsArr[index].imgUrl = this.$store.state.isPhone ? require(`./theme/img/toolImgPhone/3D0.png`) : require(`./theme/img/toolImg/3D0.png`);
            this.toolsArr[index].hoverUrl = this.$store.state.isPhone ? require(`./theme/img/toolImgPhone/3D1.png`) : require(`./theme/img/toolImg/3D1.png`);
            viewer.scene.morphTo2D(1.5);
        },
        // 转3d方法
        to3DFun() {
            let index = this.toolsArr.findIndex(item => item.toolTitle === '3D');
            this.toolsArr[index].toolTitle = '2D';
            this.toolsArr[index].imgUrl = this.$store.state.isPhone ? require(`./theme/img/toolImgPhone/2D0.png`) : require(`./theme/img/toolImg/2D0.png`);
            this.toolsArr[index].hoverUrl = this.$store.state.isPhone ? require(`./theme/img/toolImgPhone/2D1.png`) : require(`./theme/img/toolImg/2D1.png`);
            viewer.scene.morphTo3D(1.5);
        },
        // 复位
        fly_homeFun() {
            flyToBoundingSphere(
                [
                    Cesium.Cartesian3.fromDegrees(90.9833, 23.85),
                    Cesium.Cartesian3.fromDegrees(132.6666, 47.983),
                ],
                3
            );
        },
        // 灰度值统计
        grayStaFun() {
            let flag = this.$parent.isDisGry();
            if (flag) {
                dataCenterBus.$emit('isPhoneShowTj', true);
            } else {
                this.$message({
                    message: '请选择产品类型',
                    type: 'warning',
                    offset: 200,
                });
                this.clearSelectedBtn('graySta');
            }
        },
        // 清除灰度统计
        clearGraySta() {
            // 清空灰度图的选中效果
            this.clearSelectedBtn('graySta');
            dataCenterBus.$emit('isPhoneShowTj', false);
        },
        // 清除图层管理
        clearLayerCtrl() {
            this.$parent.ctrlLayerDis('ctrlLayerDis');
        },
        // 清除查询
        clearQueryList() {
            this.$parent.ctrllistDis('clear');
        },
        // 清除绘制线
        clearLineQuery() {
            CommonJs.getPrimiLine().removeAll();
        },
        // 清除绘制面
        clearAreaQuery() {
            CommonJs.getPrimiArea().removeAll();
        },
        // 清空LAI
        clearLAI() {
            this.$parent.ctrlSeqImgsDis('ctrlSeqImgsDis');
        },
        clearGroup() {
            this.$parent.clearGroup();
            this.clearSelectedBtn('graySta');
        },
    },
};
</script>

<style lang="scss">
.dataQueryTools {
    position: absolute;
    top: 100px;
    left: 20px;
    z-index: 21;
    pointer-events: none;
    .el-autocomplete {
        width: 300px;
        margin: 10px 0;
        pointer-events: auto;
    }
    .el-upload-dragger {
        width: min-content;
        height: min-content;
        background-color: unset;
        border: none;
        border-radius: 0;
    }
    .toolsBox {
        .tool {
            text-align: right;
            margin-bottom: 10px;
        }
        // .tool:nth-last-child(1) {
        //     display: none;
        // }
        .noMargin {
            margin-bottom: 10px;
            width: 40px;
            height: 40px;
        }
        img {
            width: 40px;
            pointer-events: auto;
            cursor: pointer;
        }
    }
    .el-input--suffix input {
        background: rgba(33, 43, 53, 1);
        border: 0px;
        color: #c3c3c3;
    }
}
</style>
